<template>
    <el-container class="home-container">
        <el-aside :width="isCollapse ? '64px' : '200px'">
            <el-menu background-color="#333744"
                     text-color="#fff"
                     active-text-color="#fff" unique-opened :collapse="isCollapse" :collapse-transition="false"
                     :router="true" :default-active="activePath">
                <div class="i-layout-sider-logo i-layout-sider-logo-dark">
                    <a target="_self" class="i-link i-link-color">
                        <img v-show="!isCollapse" :src="maxLogo" key="max-logo"/>
                        <img v-show="isCollapse" :src="minLogo" key="min-logo"/>
                    </a>
                </div>
                <!-- 菜单 -->
                <el-submenu :index="'/'+item.name" v-for="item in menuList" :key="item.id">
                    <template slot="title">
                        <i :class="item.icon ? item.icon : 'el-icon-mobile'"></i>
                        <span>{{ item.title }}</span>
                    </template>
                    <!--二级菜单 -->
                    <el-menu-item :index="'/'+subItem.name" v-for="subItem in item.child" :key="subItem.id"
                                  @click="saveNavState('/'+subItem.name)">
                        <template slot="title">
                            <i :class="subItem.icon ? subItem.icon : 'el-icon-mobile'"></i>
                            <span>{{ subItem.title }}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <div>
                    <div class="toggle-button" @click="toggleCollapse">
                        <i v-show="!isCollapse" :class="showIoc"></i>
                        <i v-show="isCollapse" :class="hideIoc"></i>
                    </div>
                    <div class="toggle-breadcrumb">
                        <breadcrumb></breadcrumb>
                    </div>
                </div>
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-tooltip effect="dark" content="全屏" placement="top" :enterable="false">
                            <i style="color: #101117;cursor: pointer;" class="el-icon-full-screen"
                               @click="screenfull"></i>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="19">
                        <el-dropdown>
        <span class="el-dropdown-link">
          超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item @click.native="loginOut" divided>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <router-view v-if="isRouterAlive"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'

export default {
    name: 'index',
    provide() {
        return {
            reload: this.reload
        }
    },
    components: {
        Breadcrumb
    },
    data() {
        return {
            menuList: [],
            isCollapse: false,
            activePath: '',
            maxLogo: 'https://file.iviewui.com/admin-pro-dist/img/logo-dark.ab519d9f.png',
            minLogo: 'https://file.iviewui.com/admin-pro-dist/img/logo-small.4a34a883.png',
            showIoc: 'el-icon-s-fold',
            hideIoc: 'el-icon-s-unfold',
            isFullScreen: false,
            isRouterAlive: true
        }
    },
    created() {
        this.getMenuList();
        this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods: {
        loginOut() {
            window.sessionStorage.clear();
            this.$router.push('/login');
        },
        //获取所有菜单
        async getMenuList() {
            const {data: res} = await this.$http.get('admin/permission')
            if (res.code !== 200) return this.$message.error(res.data.message)
            this.menuList = res.data.list
        },
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
        },
        saveNavState(activePath) {
            window.sessionStorage.setItem('activePath', activePath)
            this.activePath = activePath
        },
        screenfull() {
            this.$screenfull.toggle()
            this.isFullScreen = true
        },
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true
            })
        }
    }
}
</script>

<style scoped>
.i-layout-header-trigger-min {
    width: auto;
    color: #101117;
}

.i-layout-header-trigger {
    display: inline-block;
    width: 30px;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.is-active {
    background-color: #3a8ee6 !important;
}

.i-layout-header-trigger-min i {
    color: #101117;
    text-align: center;
    letter-spacing: 0.5em;
    cursor: pointer;
    font-size: 18px;
}

.i-layout-sider-logo-dark {
    border-bottom: 1px solid #101117;
    background: #333744;
}

.i-layout-sider-logo {
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #101117;
    overflow: hidden;
}

.i-layout-sider-logo img {
    height: 80%;
    vertical-align: middle;
}

.home-container {
    height: 100%;
}

.el-header {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #ffffff;

}

.el-aside {
    background-color: #333744;
}

.el-aside .el-menu {
    border-right: none;
}

.el-main {
    background-color: #eaedf1;
}

.el-header > div {
    display: flex;
    align-items: center;
}


.el-aside {
    height: 100%;
}

.toggle-button {
    width: 60px;
    font-size: 18px;
    color: #101117;
    text-align: center;
    letter-spacing: 0.5em;
    cursor: pointer;
}

.toggle-breadcrumb {
    text-align: center;

    cursor: pointer;
}

.el-dropdown-link {

}
</style>
